<template>
  <div class="showboard flex-col-center-start" >
    <div
        class="en-showboard-row flex-row-start-center width-100-percent"
        v-for="(lst,index) in computedEngList"
        :key="index"

    >
      <el-space>
        <div v-for="(chr,index) in lst" :key="index"
             :class="['span' ,'flex-row-center',computedActive(index),computedStatus(chr.status)]"
             :style="{fontSize:props.fontSize+'px'}">
          {{computedText(chr.value)}}
        </div>
      </el-space>

    </div>

  </div>
</template>

<script setup lang="ts">

import {computed, defineProps} from 'vue'

import {RecordItem, RecordStatus} from "@/ts/record";

// 特殊字符映射,不需要特殊处理的字符不用放，仅存放需要特殊处理的字符
  let textValueMap=new Map([
    [" ","_"],
    ["\n","⏎"]
  ])

  let props=defineProps<{
    fontSize:number
    currIndex:number,
    textList:Array<RecordItem>
  }>()

  let computedActive=computed(()=>{
    return (index:number)=>{
      return props.currIndex === index ? 'active':''
    }
  })

 let computedText=computed(()=>{
   return (value:string)=>{
     const mapValue=textValueMap.get(value)
     return mapValue?mapValue:value
   }
 })
  let computedStatus=computed(()=>{
    return (status:number)=>{
      switch (status){
        case RecordStatus.VOID:return '';
        case RecordStatus.SUCCESS:return 'success-status';
        case RecordStatus.ERROR:return 'error-status';
        default:return ''
      }
    }
  })

let computedEngList=computed(()=>{
  // 二维数组
  let lst:Array<RecordItem[]>=[]
  // 临时一维数组
  let tmp:Array<RecordItem>=[]
  props.textList.forEach((item,index)=>{
    tmp.push(item)
    // 结束条件:1、回车 2、最后一个
    if(item.value === '\n' || index === props.textList.length-1){
      lst.push(tmp)
      tmp=[]
    }
  })
  return lst
})
</script>

<style scoped lang="less">
  .showboard{
    width: 100%;
    padding: 20px;
    flex-wrap: wrap;
    .span{

      position: relative;
      flex: 0 0 1em;
      width: 1em;
      height: 1em;
      margin-bottom: 0.5em;
      border-radius: 0.2em;
      caret-color: transparent;
    }
    //当前活动字母
    .active{

      &::before{
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        transform: translateY(25%);
        animation: blink 0.8s ease-in-out infinite alternate;
      }
    }
    .success{
      color: var(--success-color);
      animation: swing-col 0.5s ease-in-out alternate;
    }
    .error{
      color:var(--error-color);
      animation: swing-col 0.5s ease-in-out alternate;
    }

  }
  @keyframes blink{
     50%{
       border-bottom: 3px solid black;
     }
     100%{
       border-bottom: 3px solid transparent;
     }
   }
</style>